<template>
    <div class="dashboard-container">
        <tool :get="queryFn" :selectionVideo="currentSelection" ref="attentionTool"></tool>
        <tableList v-loading="loading" :tableData="tableData" @attention="attentionFn" @select="selectList"></tableList>
        <div class="pagination">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pagination.pageIndex"
                    :page-sizes="[20, 50, 100, 200]"
                    :page-size="pagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total">
            </el-pagination>
        </div>
        <el-divider contentPosition="left">状态</el-divider>
        <div style="text-align: right; margin-bottom: 10px;">
            <el-button size="mini" @click="clearLogs">清空日志</el-button>
        </div>
        <div class="task-list">
            <div v-for="(i, index) in listData" :key="index" class="text item">
                {{`${i}` }}
            </div>
        </div>
    </div>
</template>

<script>
  import tool from './tool'
  import tableList from './tableList'
  import { getList } from '@/api/attention'
  import { startAttention } from '@/api/attention'

  export default {
    name: 'attentionIndex',
    components: {
      tool,
      tableList
    },
    data () {
      return {
        tableData: [],
        pagination: {
          pageIndex: 0,
          pageSize: 0,
          total: 0
        },
        formFilter: {},
        loading: false,
        currentSelection: [], //选中视频列表
      }
    },
    computed : {
      listData() {
        let arr = []
        if(this.$store.state.user.taskList.length) {
          arr = this.$store.state.user.taskList.filter(item => item.taskType == 20)
          arr = arr.map(item => item.message)
        }
        return arr
      }
    },
    methods: {
      handleSizeChange (val) {
        this.pagination.pageSize = val
        this.get()
      },
      handleCurrentChange (val) {
        this.pagination.pageIndex = val
        this.get()
      },
      queryFn () {
        this.pagination.pageIndex = 1
        this.get()
      },
      async get () {
        try {
          this.loading = true
          const params = {
            ...this.pagination
          }
          delete params.date
          delete params.total
          const response = await getList(params)
          this.tableData = response.data
          this.pagination.total = response.total
          this.loading = false
        } catch (e) {
          this.loading = false
          console.log(e)
        }
      },
      async attentionFn (val) {
        if (this.$refs['attentionTool']) {
          this.$refs['attentionTool'].startAttention(val.videoUrl)
        }
      },
      selectList (val) {
        this.currentSelection = val;
      },
      clearLogs () {
        this.$store.dispatch('user/clearTaskList', 20)
      }
    },
    mounted () {
      this.get()
    }
  }
</script>

<style lang="scss" scoped>


</style>
